<template>
  <van-nav-bar title="首页" />

  <div class="wrap">
    <van-search
      v-model="value"
      background="transparent"
      placeholder="请输入搜索关键词"
      shape="round"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in list" :key="item">
        <img :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>
  </div>

  <van-grid>
    <van-grid-item text="每日福利">
      <template #icon>jajaaj</template>
    </van-grid-item>
    <van-grid-item icon="photo-o" text="热销榜" />
    <van-grid-item icon="photo-o" text="每日福利" />
    <van-grid-item icon="photo-o" text="热销榜" />
  </van-grid>

  <van-grid :column-num="2">
    <van-grid-item icon="photo-o" text="热销榜" />
    <van-grid-item icon="photo-o" text="热销榜" />
    <van-grid-item icon="photo-o" text="每日福利" />
    <van-grid-item icon="photo-o" text="热销榜" />
  </van-grid>

  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    :offset="0"
  >
    <van-card
      v-for="item in productList"
      :key="item.productId"
      :price="item.currentPrice"
      :origin-price="item.originalPrice"
      desc="描述信息"
      :title="item.productName"
      :thumb="item.imgUrl"
    />
  </van-list>
</template>

<script lang="ts">
import { ref, onMounted } from "vue";
// import baidu from "../../../assets/baidu.png";
import { bannerApi, recommendApi } from "../../../utils/api";

interface ProductType {
  currentPrice: number;
  imgUrl: string;
  originalPrice: number;
  productId: string;
  productName: string;
}

export default {
  setup() {
    const list = ref<string[]>([]);
    onMounted(async () => {
      // fetch("http://www.pudge.wang:4000/home/banner")
      //   .then((response) => response.json())
      //   .then((res) => {
      //     // console.log(res.result.list);
      //     list.value = res.result.list;
      //   });
      const res = await bannerApi();
      list.value = res.result.list;
    });

    const value = ref<string>("");

    const loading = ref<boolean>(false);
    const finished = ref<boolean>(false);
    const page = ref<number>(1);
    const productList = ref<ProductType[]>([]);
    const onLoad = async () => {
      //
      const res = await recommendApi({
        page: page.value,
        count: 3,
      });
      // console.log(res);
      productList.value = [...productList.value, ...res.result.list];
      console.log("拉到低了");
      page.value = page.value + 1;
      loading.value = false;
      if (res.result.list.length < 3) {
        finished.value = true;
      }
    };
    // onMounted(async () => {
    //   const res = await recommendApi({
    //     page: page.value,
    //     count: 3,
    //   });
    //   // console.log(res);
    //   productList.value = res.result.list;
    // });

    return {
      list,
      value,
      loading,
      finished,
      onLoad,
      productList,
    };
  },
};
</script>

<style lang="less" scoped>
.wrap {
  position: relative;
  height: 250px;
}

.van-search {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
}

/deep/.van-search__content {
  background: rgba(255, 255, 255, 0.3);
  #van-search-1-input::placeholder {
    color: #fff;
  }
}

.my-swipe .van-swipe-item {
  height: 250px;

  img {
    width: 100%;
    height: 100%;
  }
}

// deep可以影响子组件
/deep/.van-swipe__indicator {
  width: 30px;
  height: 5px;
  border-radius: 0;
}
</style>
